<template>
  <div class="markView" ref="markbox">
    <vHeader />
    <div class="topBtns">
      <div class="tb-item" @click="exitView">
        <i class="amsp el-amsp-tuichu1"></i><span class="vb-name">退出</span>
      </div>
      <div class="tb-item" @click="saveView">
        <i class="amsp el-amsp-baocun"></i><span class="vb-name">保存</span>
      </div>
    </div>
    <div class="canvasBox" ref="canvasBox" :style="markViewH">
      <canvas ref="markCanvas"></canvas>
      <vUserCanvas ref="userCanvas" class="userCanvas" :handleBottomBox="handleBottomBox" :curPencil="curPencil" @addTextBox="addTextBox"/>
      <div ref="userLabelBox" class="userLabelBox" contenteditable="true" @blur="overTextBox"></div>
    </div>
    <vBottom ref="vBottom" :handleBottomBox="handleBottomBox" :curPencil="curPencil"/>
  </div>
</template>

<script>
import html2canvas from "html2canvas"
import vBottom from './markView/v-bottom'
import vUserCanvas from './markView/v-usre-canvas'
import vHeader from './pub/v-header'

let saveLoad = false

export default {
  components: {
    vBottom,
    vUserCanvas,
    vHeader
  },
  props: [],
  data() {
    return {
      prevActiveView: null,
      history: [],
      handleBottomBox: {
        isPencil: true,
        isRubber: false,
        isText: false
      },
      curPencil: {
        color: '#E54848',
        shape: 0,
        lineWidth: 3,
      },
      markViewH: {}
    }
  },
  computed: {
  },
  created() {},
  mounted() {},
  methods:{
    addTextBox (x,y) {
      let [max_x, max_y] = [this.$refs.markCanvas.offsetWidth, this.$refs.markCanvas.offsetHeight]
      let userLabelBox = this.$refs.userLabelBox
      userLabelBox.style.color = this.curPencil.color
      userLabelBox.style.left = `${x}px`
      userLabelBox.style.top = `${y}px`
      userLabelBox.style.maxWidth = `${max_x - x}px`
      userLabelBox.style.maxHeight = `${max_y - y}px`
      userLabelBox.style.border = '1px dashed #333'
      userLabelBox.dataset.x = x
      userLabelBox.dataset.y = y
      userLabelBox.focus()
    },
    overTextBox () {
      let userLabelBox = this.$refs.userLabelBox
      let [x,y] = [userLabelBox.dataset.x, userLabelBox.dataset.y]
      let text = userLabelBox.innerText
      userLabelBox.style.left = `0`
      userLabelBox.style.top = `0`
      userLabelBox.style.border = ''
      userLabelBox.innerText = ''
      this.$refs.userCanvas.setText(text, x, y, userLabelBox.offsetWidth, userLabelBox.offsetHeight )
    },
    exitView () {
      this.$parent.activeView = this.prevActiveView
    },
    saveView () {
        if (saveLoad) { return }
        saveLoad = true
        html2canvas(this.$refs.canvasBox).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.$parent.saveHtmlPic(dataURL, this.prevActiveView)
          saveLoad = false
        });
    },
    showImg (dataURL, prev) {
      if (prev == 1) {
        this.markViewH = {height: '100%'}
      } else if (prev == 2) {
        this.markViewH = {height: 'calc(100% - 60px)'}
      }
      this.prevActiveView = prev
      let mcanvas = this.$refs.markCanvas
      let ucanvas = this.$refs.userCanvas.$el
      let ctx = mcanvas.getContext('2d')
      let img = new Image();
      img.src = dataURL;
      img.onload = (e) => {
        const _w = this.$refs.canvasBox.clientWidth
        let _h=0;
        // const _h = img.height * (_w/img.width)
        // const _h = this.$refs.canvasBox.clientHeight - this.$refs.vBottom.$el.querySelector('.v-bottom').clientHeight
        if(prev===1){
          _h = document.documentElement.clientHeight || document.body.clientHeight // 修复模型变形问题
        }else{
          _h = this.$refs.canvasBox.clientHeight;
          //document.getElementsByClassName('.canvasBox').style = "background-color:#000";
          this.$refs.canvasBox.style.backgroundColor="#000";
        }
        //const _h = this.$refs.canvasBox.clientHeight
        mcanvas.width = ucanvas.width = _w
        mcanvas.height = ucanvas.height = _h
        ctx.drawImage(img, 0,0, img.width, img.height, 0,0, _w, _h)
      }
    }
  }
}
</script>
<style scoped lang="less">
.markView {
  height: 100%;
  background-color: #333;
  .canvasBox {
    height: 100%;
  }
  .topBtns {
    position: absolute;
    top: 30px;
    width: 120px;
    height: 24px;
    line-height: 24px;
    left: 50%;
    margin-left: -60px;
    // background-color: #1296DB;
    background-color: #eee;
    display: flex;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    align-items: center;
    z-index: 2;
    .tb-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      // color: #fff;
      .amsp {
        margin-right: 2px;
      }
    }
  }
  .userCanvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .userLabelBox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    min-width: 60px;
    min-height: 12PX;
    line-height: 12PX;
    font-size: 12PX;
    overflow: hidden;
    // color: red;
  }
}
</style>